<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部导航栏布局</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/search.css">
</head>

<body>
    <!-- 项目的最外层 -->
    <div class="outer">
        <!-- 窗口侧边栏 -->
        <div class="toolbar toolbar-wrap">
            <div class="content"></div>
            <div class="but list"></div>
            <div class="toolist">
                <div class="pull">
                    <i class="tab-ico vip"></i>
                    <em class="tab-text">商品会员</em>
                </div>
                <div class="pull">
                    <i class="tab-ico cart"></i>
                    <em class="tab-text">购物车</em>
                </div>
                <div class="pull">
                    <i class="tab-ico follow"></i>
                    <em class="tab-text">我的关注</em>
                </div>
                <div class="pull">
                    <i class="tab-ico history"></i>
                    <em class="tab-text">我的足迹</em>
                </div>
                <div class="pull">
                    <i class="tab-ico message"></i>
                    <em class="tab-text">我的消息</em>
                </div>
                <div class="pull">
                    <i class="tab-ico jimi"></i>
                    <em class="tab-text">咨询</em>
                </div>
            </div>
            <div class="back pull">
                <i class="tab-ico top"></i>
                <em class="tab-text">顶部</em>
            </div>
        </div>

        <!-- 头部 -->
        <header class="header">
            <!-- 头部的第一行 -->
            <div class="top">
                <div class="container">
                    <div class="loginList">
                        <p>尚品汇欢迎您！</p>
                        <p>
                            <span>请</span>
                            <a href="###">登录</a>
                            <a href="###" class="register">免费注册</a>
                        </p>
                    </div>
                    <div class="typeList">
                        <a href="###">我的订单</a>
                        <a href="###">我的购物车</a>
                        <a href="###">我的尚品汇</a>
                        <a href="###">尚品汇会员</a>
                        <a href="###">企业采购</a>
                        <a href="###">关注尚品汇</a>
                        <a href="###">合作招商</a>
                        <a href="###">商家后台</a>
                    </div>
                </div>
            </div>
            <!--头部第二行 搜索区域-->
            <div class="bottom">
                <h1 class="logoArea">
                    <a class="logo" title="尚品汇" href="###" target="_blank">
                        <img src="./images/logo.png" alt="">
                    </a>
                </h1>
                <div class="searchArea">
                    <form action="###" class="searchForm">
                        <input type="text" id="autocomplete" class="input-error input-xxlarge" />
                        <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                    </form>
                </div>
            </div>
        </header>

        <!-- 商品分类导航 -->
        <div class="typeNav">
            <div class="container">
                <h2 class="all">全部商品分类</h2>
                <nav class="nav">
                    <a href="###">服装城</a>
                    <a href="###">美妆馆</a>
                    <a href="###">尚品汇超市</a>
                    <a href="###">全球购</a>
                    <a href="###">闪购</a>
                    <a href="###">团购</a>
                    <a href="###">有趣</a>
                    <a href="###">秒杀</a>
                </nav>
                <div class="sort" style="display:none">
                    <div class="all-sort-list2">
                        <div class="item bo">
                            <h3>
                                <a href="">图书、音像、数字商品</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">家用电器</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书1</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">免费</a>
                                            </em>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">数字音乐</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">通俗流行</a>
                                            </em>
                                            <em>
                                                <a href="">古典音乐</a>
                                            </em>
                                            <em>
                                                <a href="">摇滚说唱</a>
                                            </em>
                                            <em>
                                                <a href="">爵士蓝调</a>
                                            </em>
                                            <em>
                                                <a href="">乡村民谣</a>
                                            </em>
                                            <em>
                                                <a href="">有声读物</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">音像</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">音乐</a>
                                            </em>
                                            <em>
                                                <a href="">影视</a>
                                            </em>
                                            <em>
                                                <a href="">教育音像</a>
                                            </em>
                                            <em>
                                                <a href="">游戏</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>文艺</dt>
                                        <dd>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">青春文学</a>
                                            </em>
                                            <em>
                                                <a href="">传记</a>
                                            </em>
                                            <em>
                                                <a href="">艺术</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>人文社科</dt>
                                        <dd>
                                            <em>
                                                <a href="">历史</a>
                                            </em>
                                            <em>
                                                <a href="">心理学</a>
                                            </em>
                                            <em>
                                                <a href="">政治/军事</a>
                                            </em>
                                            <em>
                                                <a href="">国学/古籍</a>
                                            </em>
                                            <em>
                                                <a href="">哲学/宗教</a>
                                            </em>
                                            <em>
                                                <a href="">社会科学</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>经管励志</dt>
                                        <dd>
                                            <em>
                                                <a href="">经济</a>
                                            </em>
                                            <em>
                                                <a href="">金融与投资</a>
                                            </em>
                                            <em>
                                                <a href="">管理</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>生活</dt>
                                        <dd>
                                            <em>
                                                <a href="">家庭与育儿</a>
                                            </em>
                                            <em>
                                                <a href="">旅游/地图</a>
                                            </em>
                                            <em>
                                                <a href="">烹饪/美食</a>
                                            </em>
                                            <em>
                                                <a href="">时尚/美妆</a>
                                            </em>
                                            <em>
                                                <a href="">家居</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋与两性</a>
                                            </em>
                                            <em>
                                                <a href="">娱乐/休闲</a>
                                            </em>
                                            <em>
                                                <a href="">健身与保健</a>
                                            </em>
                                            <em>
                                                <a href="">动漫/幽默</a>
                                            </em>
                                            <em>
                                                <a href="">体育/运动</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>科技</dt>
                                        <dd>
                                            <em>
                                                <a href="">科普</a>
                                            </em>
                                            <em>
                                                <a href="">IT</a>
                                            </em>
                                            <em>
                                                <a href="">建筑</a>
                                            </em>
                                            <em>
                                                <a href="">医学</a>
                                            </em>
                                            <em>
                                                <a href="">工业技术</a>
                                            </em>
                                            <em>
                                                <a href="">电子/通信</a>
                                            </em>
                                            <em>
                                                <a href="">农林</a>
                                            </em>
                                            <em>
                                                <a href="">科学与自然</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>少儿</dt>
                                        <dd>
                                            <em>
                                                <a href="">少儿</a>
                                            </em>
                                            <em>
                                                <a href="">0-2岁</a>
                                            </em>
                                            <em>
                                                <a href="">3-6岁</a>
                                            </em>
                                            <em>
                                                <a href="">7-10岁</a>
                                            </em>
                                            <em>
                                                <a href="">11-14岁</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">手机、数码、充值</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">充值</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="recharge.html">充值</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书2</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">免费</a>
                                            </em>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">数字音乐</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">通俗流行</a>
                                            </em>
                                            <em>
                                                <a href="">古典音乐</a>
                                            </em>
                                            <em>
                                                <a href="">摇滚说唱</a>
                                            </em>
                                            <em>
                                                <a href="">爵士蓝调</a>
                                            </em>
                                            <em>
                                                <a href="">乡村民谣</a>
                                            </em>
                                            <em>
                                                <a href="">有声读物</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">音像</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">音乐</a>
                                            </em>
                                            <em>
                                                <a href="">影视</a>
                                            </em>
                                            <em>
                                                <a href="">教育音像</a>
                                            </em>
                                            <em>
                                                <a href="">游戏</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>文艺</dt>
                                        <dd>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">青春文学</a>
                                            </em>
                                            <em>
                                                <a href="">传记</a>
                                            </em>
                                            <em>
                                                <a href="">艺术</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>人文社科</dt>
                                        <dd>
                                            <em>
                                                <a href="">历史</a>
                                            </em>
                                            <em>
                                                <a href="">心理学</a>
                                            </em>
                                            <em>
                                                <a href="">政治/军事</a>
                                            </em>
                                            <em>
                                                <a href="">国学/古籍</a>
                                            </em>
                                            <em>
                                                <a href="">哲学/宗教</a>
                                            </em>
                                            <em>
                                                <a href="">社会科学</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">电脑、办公</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书3</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">免费</a>
                                            </em>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">数字音乐</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">通俗流行</a>
                                            </em>
                                            <em>
                                                <a href="">古典音乐</a>
                                            </em>
                                            <em>
                                                <a href="">摇滚说唱</a>
                                            </em>
                                            <em>
                                                <a href="">爵士蓝调</a>
                                            </em>
                                            <em>
                                                <a href="">乡村民谣</a>
                                            </em>
                                            <em>
                                                <a href="">有声读物</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">音像</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">音乐</a>
                                            </em>
                                            <em>
                                                <a href="">影视</a>
                                            </em>
                                            <em>
                                                <a href="">教育音像</a>
                                            </em>
                                            <em>
                                                <a href="">游戏</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>文艺</dt>
                                        <dd>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">青春文学</a>
                                            </em>
                                            <em>
                                                <a href="">传记</a>
                                            </em>
                                            <em>
                                                <a href="">艺术</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>人文社科</dt>
                                        <dd>
                                            <em>
                                                <a href="">历史</a>
                                            </em>
                                            <em>
                                                <a href="">心理学</a>
                                            </em>
                                            <em>
                                                <a href="">政治/军事</a>
                                            </em>
                                            <em>
                                                <a href="">国学/古籍</a>
                                            </em>
                                            <em>
                                                <a href="">哲学/宗教</a>
                                            </em>
                                            <em>
                                                <a href="">社会科学</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>经管励志</dt>
                                        <dd>
                                            <em>
                                                <a href="">经济</a>
                                            </em>
                                            <em>
                                                <a href="">金融与投资</a>
                                            </em>
                                            <em>
                                                <a href="">管理</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>生活</dt>
                                        <dd>
                                            <em>
                                                <a href="">家庭与育儿</a>
                                            </em>
                                            <em>
                                                <a href="">旅游/地图</a>
                                            </em>
                                            <em>
                                                <a href="">烹饪/美食</a>
                                            </em>
                                            <em>
                                                <a href="">时尚/美妆</a>
                                            </em>
                                            <em>
                                                <a href="">家居</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋与两性</a>
                                            </em>
                                            <em>
                                                <a href="">娱乐/休闲</a>
                                            </em>
                                            <em>
                                                <a href="">健身与保健</a>
                                            </em>
                                            <em>
                                                <a href="">动漫/幽默</a>
                                            </em>
                                            <em>
                                                <a href="">体育/运动</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>科技</dt>
                                        <dd>
                                            <em>
                                                <a href="">科普</a>
                                            </em>
                                            <em>
                                                <a href="">IT</a>
                                            </em>
                                            <em>
                                                <a href="">建筑</a>
                                            </em>
                                            <em>
                                                <a href="">医学</a>
                                            </em>
                                            <em>
                                                <a href="">工业技术</a>
                                            </em>
                                            <em>
                                                <a href="">电子/通信</a>
                                            </em>
                                            <em>
                                                <a href="">农林</a>
                                            </em>
                                            <em>
                                                <a href="">科学与自然</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>少儿</dt>
                                        <dd>
                                            <em>
                                                <a href="">少儿</a>
                                            </em>
                                            <em>
                                                <a href="">0-2岁</a>
                                            </em>
                                            <em>
                                                <a href="">3-6岁</a>
                                            </em>
                                            <em>
                                                <a href="">7-10岁</a>
                                            </em>
                                            <em>
                                                <a href="">11-14岁</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>教育</dt>
                                        <dd>
                                            <em>
                                                <a href="">教材教辅</a>
                                            </em>
                                            <em>
                                                <a href="">考试</a>
                                            </em>
                                            <em>
                                                <a href="">外语学习</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>其它</dt>
                                        <dd>
                                            <em>
                                                <a href="">英文原版书</a>
                                            </em>
                                            <em>
                                                <a href="">港台图书</a>
                                            </em>
                                            <em>
                                                <a href="">工具书</a>
                                            </em>
                                            <em>
                                                <a href="">套装书</a>
                                            </em>
                                            <em>
                                                <a href="">杂志/期刊</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">家居、家具、家装、厨具</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书4</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">免费</a>
                                            </em>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">数字音乐</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">通俗流行</a>
                                            </em>
                                            <em>
                                                <a href="">古典音乐</a>
                                            </em>
                                            <em>
                                                <a href="">摇滚说唱</a>
                                            </em>
                                            <em>
                                                <a href="">爵士蓝调</a>
                                            </em>
                                            <em>
                                                <a href="">乡村民谣</a>
                                            </em>
                                            <em>
                                                <a href="">有声读物</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">音像</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">音乐</a>
                                            </em>
                                            <em>
                                                <a href="">影视</a>
                                            </em>
                                            <em>
                                                <a href="">教育音像</a>
                                            </em>
                                            <em>
                                                <a href="">游戏</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>文艺</dt>
                                        <dd>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">青春文学</a>
                                            </em>
                                            <em>
                                                <a href="">传记</a>
                                            </em>
                                            <em>
                                                <a href="">艺术</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>人文社科</dt>
                                        <dd>
                                            <em>
                                                <a href="">历史</a>
                                            </em>
                                            <em>
                                                <a href="">心理学</a>
                                            </em>
                                            <em>
                                                <a href="">政治/军事</a>
                                            </em>
                                            <em>
                                                <a href="">国学/古籍</a>
                                            </em>
                                            <em>
                                                <a href="">哲学/宗教</a>
                                            </em>
                                            <em>
                                                <a href="">社会科学</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>经管励志</dt>
                                        <dd>
                                            <em>
                                                <a href="">经济</a>
                                            </em>
                                            <em>
                                                <a href="">金融与投资</a>
                                            </em>
                                            <em>
                                                <a href="">管理</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>生活</dt>
                                        <dd>
                                            <em>
                                                <a href="">家庭与育儿</a>
                                            </em>
                                            <em>
                                                <a href="">旅游/地图</a>
                                            </em>
                                            <em>
                                                <a href="">烹饪/美食</a>
                                            </em>
                                            <em>
                                                <a href="">时尚/美妆</a>
                                            </em>
                                            <em>
                                                <a href="">家居</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋与两性</a>
                                            </em>
                                            <em>
                                                <a href="">娱乐/休闲</a>
                                            </em>
                                            <em>
                                                <a href="">健身与保健</a>
                                            </em>
                                            <em>
                                                <a href="">动漫/幽默</a>
                                            </em>
                                            <em>
                                                <a href="">体育/运动</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>科技</dt>
                                        <dd>
                                            <em>
                                                <a href="">科普</a>
                                            </em>
                                            <em>
                                                <a href="">IT</a>
                                            </em>
                                            <em>
                                                <a href="">建筑</a>
                                            </em>
                                            <em>
                                                <a href="">医学</a>
                                            </em>
                                            <em>
                                                <a href="">工业技术</a>
                                            </em>
                                            <em>
                                                <a href="">电子/通信</a>
                                            </em>
                                            <em>
                                                <a href="">农林</a>
                                            </em>
                                            <em>
                                                <a href="">科学与自然</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>少儿</dt>
                                        <dd>
                                            <em>
                                                <a href="">少儿</a>
                                            </em>
                                            <em>
                                                <a href="">0-2岁</a>
                                            </em>
                                            <em>
                                                <a href="">3-6岁</a>
                                            </em>
                                            <em>
                                                <a href="">7-10岁</a>
                                            </em>
                                            <em>
                                                <a href="">11-14岁</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">服饰内衣</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书5</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">免费</a>
                                            </em>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">数字音乐</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">通俗流行</a>
                                            </em>
                                            <em>
                                                <a href="">古典音乐</a>
                                            </em>
                                            <em>
                                                <a href="">摇滚说唱</a>
                                            </em>
                                            <em>
                                                <a href="">爵士蓝调</a>
                                            </em>
                                            <em>
                                                <a href="">乡村民谣</a>
                                            </em>
                                            <em>
                                                <a href="">有声读物</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">音像</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">音乐</a>
                                            </em>
                                            <em>
                                                <a href="">影视</a>
                                            </em>
                                            <em>
                                                <a href="">教育音像</a>
                                            </em>
                                            <em>
                                                <a href="">游戏</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>文艺</dt>
                                        <dd>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">青春文学</a>
                                            </em>
                                            <em>
                                                <a href="">传记</a>
                                            </em>
                                            <em>
                                                <a href="">艺术</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>人文社科</dt>
                                        <dd>
                                            <em>
                                                <a href="">历史</a>
                                            </em>
                                            <em>
                                                <a href="">心理学</a>
                                            </em>
                                            <em>
                                                <a href="">政治/军事</a>
                                            </em>
                                            <em>
                                                <a href="">国学/古籍</a>
                                            </em>
                                            <em>
                                                <a href="">哲学/宗教</a>
                                            </em>
                                            <em>
                                                <a href="">社会科学</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>经管励志</dt>
                                        <dd>
                                            <em>
                                                <a href="">经济</a>
                                            </em>
                                            <em>
                                                <a href="">金融与投资</a>
                                            </em>
                                            <em>
                                                <a href="">管理</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>生活</dt>
                                        <dd>
                                            <em>
                                                <a href="">家庭与育儿</a>
                                            </em>
                                            <em>
                                                <a href="">旅游/地图</a>
                                            </em>
                                            <em>
                                                <a href="">烹饪/美食</a>
                                            </em>
                                            <em>
                                                <a href="">时尚/美妆</a>
                                            </em>
                                            <em>
                                                <a href="">家居</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋与两性</a>
                                            </em>
                                            <em>
                                                <a href="">娱乐/休闲</a>
                                            </em>
                                            <em>
                                                <a href="">健身与保健</a>
                                            </em>
                                            <em>
                                                <a href="">动漫/幽默</a>
                                            </em>
                                            <em>
                                                <a href="">体育/运动</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>科技</dt>
                                        <dd>
                                            <em>
                                                <a href="">科普</a>
                                            </em>
                                            <em>
                                                <a href="">IT</a>
                                            </em>
                                            <em>
                                                <a href="">建筑</a>
                                            </em>
                                            <em>
                                                <a href="">医学</a>
                                            </em>
                                            <em>
                                                <a href="">工业技术</a>
                                            </em>
                                            <em>
                                                <a href="">电子/通信</a>
                                            </em>
                                            <em>
                                                <a href="">农林</a>
                                            </em>
                                            <em>
                                                <a href="">科学与自然</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">个护化妆</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书6</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">免费</a>
                                            </em>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">数字音乐</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">通俗流行</a>
                                            </em>
                                            <em>
                                                <a href="">古典音乐</a>
                                            </em>
                                            <em>
                                                <a href="">摇滚说唱</a>
                                            </em>
                                            <em>
                                                <a href="">爵士蓝调</a>
                                            </em>
                                            <em>
                                                <a href="">乡村民谣</a>
                                            </em>
                                            <em>
                                                <a href="">有声读物</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">音像</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">音乐</a>
                                            </em>
                                            <em>
                                                <a href="">影视</a>
                                            </em>
                                            <em>
                                                <a href="">教育音像</a>
                                            </em>
                                            <em>
                                                <a href="">游戏</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>文艺</dt>
                                        <dd>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">青春文学</a>
                                            </em>
                                            <em>
                                                <a href="">传记</a>
                                            </em>
                                            <em>
                                                <a href="">艺术</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>人文社科</dt>
                                        <dd>
                                            <em>
                                                <a href="">历史</a>
                                            </em>
                                            <em>
                                                <a href="">心理学</a>
                                            </em>
                                            <em>
                                                <a href="">政治/军事</a>
                                            </em>
                                            <em>
                                                <a href="">国学/古籍</a>
                                            </em>
                                            <em>
                                                <a href="">哲学/宗教</a>
                                            </em>
                                            <em>
                                                <a href="">社会科学</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>经管励志</dt>
                                        <dd>
                                            <em>
                                                <a href="">经济</a>
                                            </em>
                                            <em>
                                                <a href="">金融与投资</a>
                                            </em>
                                            <em>
                                                <a href="">管理</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>生活</dt>
                                        <dd>
                                            <em>
                                                <a href="">家庭与育儿</a>
                                            </em>
                                            <em>
                                                <a href="">旅游/地图</a>
                                            </em>
                                            <em>
                                                <a href="">烹饪/美食</a>
                                            </em>
                                            <em>
                                                <a href="">时尚/美妆</a>
                                            </em>
                                            <em>
                                                <a href="">家居</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋与两性</a>
                                            </em>
                                            <em>
                                                <a href="">娱乐/休闲</a>
                                            </em>
                                            <em>
                                                <a href="">健身与保健</a>
                                            </em>
                                            <em>
                                                <a href="">动漫/幽默</a>
                                            </em>
                                            <em>
                                                <a href="">体育/运动</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>科技</dt>
                                        <dd>
                                            <em>
                                                <a href="">科普</a>
                                            </em>
                                            <em>
                                                <a href="">IT</a>
                                            </em>
                                            <em>
                                                <a href="">建筑</a>
                                            </em>
                                            <em>
                                                <a href="">医学</a>
                                            </em>
                                            <em>
                                                <a href="">工业技术</a>
                                            </em>
                                            <em>
                                                <a href="">电子/通信</a>
                                            </em>
                                            <em>
                                                <a href="">农林</a>
                                            </em>
                                            <em>
                                                <a href="">科学与自然</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>少儿</dt>
                                        <dd>
                                            <em>
                                                <a href="">少儿</a>
                                            </em>
                                            <em>
                                                <a href="">0-2岁</a>
                                            </em>
                                            <em>
                                                <a href="">3-6岁</a>
                                            </em>
                                            <em>
                                                <a href="">7-10岁</a>
                                            </em>
                                            <em>
                                                <a href="">11-14岁</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>教育</dt>
                                        <dd>
                                            <em>
                                                <a href="">教材教辅</a>
                                            </em>
                                            <em>
                                                <a href="">考试</a>
                                            </em>
                                            <em>
                                                <a href="">外语学习</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>其它</dt>
                                        <dd>
                                            <em>
                                                <a href="">英文原版书</a>
                                            </em>
                                            <em>
                                                <a href="">港台图书</a>
                                            </em>
                                            <em>
                                                <a href="">工具书</a>
                                            </em>
                                            <em>
                                                <a href="">套装书</a>
                                            </em>
                                            <em>
                                                <a href="">杂志/期刊</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">运动健康</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书7</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">免费</a>
                                            </em>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">数字音乐</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">通俗流行</a>
                                            </em>
                                            <em>
                                                <a href="">古典音乐</a>
                                            </em>
                                            <em>
                                                <a href="">摇滚说唱</a>
                                            </em>
                                            <em>
                                                <a href="">爵士蓝调</a>
                                            </em>
                                            <em>
                                                <a href="">乡村民谣</a>
                                            </em>
                                            <em>
                                                <a href="">有声读物</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">音像</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">音乐</a>
                                            </em>
                                            <em>
                                                <a href="">影视</a>
                                            </em>
                                            <em>
                                                <a href="">教育音像</a>
                                            </em>
                                            <em>
                                                <a href="">游戏</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>文艺</dt>
                                        <dd>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">青春文学</a>
                                            </em>
                                            <em>
                                                <a href="">传记</a>
                                            </em>
                                            <em>
                                                <a href="">艺术</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">汽车用品</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem">
                                    <dl class="fore">
                                        <dt>
                                            <a href="">电子书8</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">免费</a>
                                            </em>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋/两性</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">经管</a>
                                            </em>
                                            <em>
                                                <a href="">畅读VIP</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">数字音乐</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">通俗流行</a>
                                            </em>
                                            <em>
                                                <a href="">古典音乐</a>
                                            </em>
                                            <em>
                                                <a href="">摇滚说唱</a>
                                            </em>
                                            <em>
                                                <a href="">爵士蓝调</a>
                                            </em>
                                            <em>
                                                <a href="">乡村民谣</a>
                                            </em>
                                            <em>
                                                <a href="">有声读物</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>
                                            <a href="">音像</a>
                                        </dt>
                                        <dd>
                                            <em>
                                                <a href="">音乐</a>
                                            </em>
                                            <em>
                                                <a href="">影视</a>
                                            </em>
                                            <em>
                                                <a href="">教育音像</a>
                                            </em>
                                            <em>
                                                <a href="">游戏</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>文艺</dt>
                                        <dd>
                                            <em>
                                                <a href="">小说</a>
                                            </em>
                                            <em>
                                                <a href="">文学</a>
                                            </em>
                                            <em>
                                                <a href="">青春文学</a>
                                            </em>
                                            <em>
                                                <a href="">传记</a>
                                            </em>
                                            <em>
                                                <a href="">艺术</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>人文社科</dt>
                                        <dd>
                                            <em>
                                                <a href="">历史</a>
                                            </em>
                                            <em>
                                                <a href="">心理学</a>
                                            </em>
                                            <em>
                                                <a href="">政治/军事</a>
                                            </em>
                                            <em>
                                                <a href="">国学/古籍</a>
                                            </em>
                                            <em>
                                                <a href="">哲学/宗教</a>
                                            </em>
                                            <em>
                                                <a href="">社会科学</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>经管励志</dt>
                                        <dd>
                                            <em>
                                                <a href="">经济</a>
                                            </em>
                                            <em>
                                                <a href="">金融与投资</a>
                                            </em>
                                            <em>
                                                <a href="">管理</a>
                                            </em>
                                            <em>
                                                <a href="">励志与成功</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>生活</dt>
                                        <dd>
                                            <em>
                                                <a href="">家庭与育儿</a>
                                            </em>
                                            <em>
                                                <a href="">旅游/地图</a>
                                            </em>
                                            <em>
                                                <a href="">烹饪/美食</a>
                                            </em>
                                            <em>
                                                <a href="">时尚/美妆</a>
                                            </em>
                                            <em>
                                                <a href="">家居</a>
                                            </em>
                                            <em>
                                                <a href="">婚恋与两性</a>
                                            </em>
                                            <em>
                                                <a href="">娱乐/休闲</a>
                                            </em>
                                            <em>
                                                <a href="">健身与保健</a>
                                            </em>
                                            <em>
                                                <a href="">动漫/幽默</a>
                                            </em>
                                            <em>
                                                <a href="">体育/运动</a>
                                            </em>
                                        </dd>
                                    </dl>
                                    <dl class="fore">
                                        <dt>科技</dt>
                                        <dd>
                                            <em>
                                                <a href="">科普</a>
                                            </em>
                                            <em>
                                                <a href="">IT</a>
                                            </em>
                                            <em>
                                                <a href="">建筑</a>
                                            </em>
                                            <em>
                                                <a href="">医学</a>
                                            </em>
                                            <em>
                                                <a href="">工业技术</a>
                                            </em>
                                            <em>
                                                <a href="">电子/通信</a>
                                            </em>
                                            <em>
                                                <a href="">农林</a>
                                            </em>
                                            <em>
                                                <a href="">科学与自然</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">彩票、旅行</a>
                            </h3>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">理财、众筹</a>
                            </h3>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">母婴、玩具</a>
                            </h3>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">箱包</a>
                            </h3>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">运动户外</a>
                            </h3>
                        </div>
                        <div class="item">
                            <h3>
                                <a href="">箱包</a>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--list-content-->
        <div class="main">
            <div class="py-container">
                <!--bread-->
                <div class="bread">
                    <ul class="fl sui-breadcrumb">
                        <li>
                            <a href="#">全部结果</a>
                        </li>
                    </ul>
                    <ul class="fl sui-tag">
                        <li class="with-x">手机</li>
                        <li class="with-x">iphone<i>×</i></li>
                        <li class="with-x">华为<i>×</i></li>
                        <li class="with-x">OPPO<i>×</i></li>
                    </ul>
                </div>
                <!--selector-->
                <div class="clearfix selector">
                    <div class="type-wrap logo">
                        <div class="fl key brand">品牌</div>
                        <div class="value logos">
                            <ul class="logo-list">
                                <li>索尼（SONY）</li>
                                <li>TCL</li>
                                <li>长虹（CHANGHONG）</li>
                                <li>飞利浦（PHILIPS）</li>
                                <li>风行电视</li>
                                <li><img src="./images/search/phone06.png" /></li>
                                <li><img src="./images/search/phone07.png" /></li>
                                <li><img src="./images/search/phone08.png" /></li>
                                <li><img src="./images/search/phone09.png" /></li>
                                <li><img src="./images/search/phone10.png" /></li>
                                <li><img src="./images/search/phone11.png" /></li>
                                <li><img src="./images/search/phone12.png" /></li>
                                <li><img src="./images/search/phone12.png" /></li>
                                <li><img src="./images/search/phone14.png" /></li>
                                <li><img src="./images/search/phone01.png" /></li>
                                <li><img src="./images/search/phone06.png" /></li>
                                <li><img src="./images/search/phone07.png" /></li>
                                <li><img src="./images/search/phone02.png" /></li>
                            </ul>
                        </div>
                        <div class="ext">
                            <a href="javascript:void(0);" class="sui-btn">多选</a>
                            <a href="javascript:void(0);">更多</a>
                        </div>
                    </div>
                    <div class="type-wrap">
                        <div class="fl key">网络制式</div>
                        <div class="fl value">
                            <ul class="type-list">
                                <li>
                                    <a>GSM（移动/联通2G）</a>
                                </li>
                                <li>
                                    <a>电信2G</a>
                                </li>
                                <li>
                                    <a>电信3G</a>
                                </li>
                                <li>
                                    <a>移动3G</a>
                                </li>
                                <li>
                                    <a>联通3G</a>
                                </li>
                                <li>
                                    <a>联通4G</a>
                                </li>
                                <li>
                                    <a>电信3G</a>
                                </li>
                                <li>
                                    <a>移动3G</a>
                                </li>
                                <li>
                                    <a>联通3G</a>
                                </li>
                                <li>
                                    <a>联通4G</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fl ext"></div>
                    </div>
                    <div class="type-wrap">
                        <div class="fl key">显示屏尺寸</div>
                        <div class="fl value">
                            <ul class="type-list">
                                <li>
                                    <a>4.0-4.9英寸</a>
                                </li>
                                <li>
                                    <a>4.0-4.9英寸</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fl ext"></div>
                    </div>
                    <div class="type-wrap">
                        <div class="fl key">摄像头像素</div>
                        <div class="fl value">
                            <ul class="type-list">
                                <li>
                                    <a>1200万以上</a>
                                </li>
                                <li>
                                    <a>800-1199万</a>
                                </li>
                                <li>
                                    <a>1200-1599万</a>
                                </li>
                                <li>
                                    <a>1600万以上</a>
                                </li>
                                <li>
                                    <a>无摄像头</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fl ext"></div>
                    </div>
                    <div class="type-wrap">
                        <div class="fl key">价格</div>
                        <div class="fl value">
                            <ul class="type-list">
                                <li>
                                    <a>0-500元</a>
                                </li>
                                <li>
                                    <a>500-1000元</a>
                                </li>
                                <li>
                                    <a>1000-1500元</a>
                                </li>
                                <li>
                                    <a>1500-2000元</a>
                                </li>
                                <li>
                                    <a>2000-3000元 </a>
                                </li>
                                <li>
                                    <a>3000元以上</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fl ext">
                        </div>
                    </div>
                    <div class="type-wrap">
                        <div class="fl key">更多筛选项</div>
                        <div class="fl value">
                            <ul class="type-list">
                                <li>
                                    <a>特点</a>
                                </li>
                                <li>
                                    <a>系统</a>
                                </li>
                                <li>
                                    <a>手机内存 </a>
                                </li>
                                <li>
                                    <a>单卡双卡</a>
                                </li>
                                <li>
                                    <a>其他</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fl ext">
                        </div>
                    </div>
                </div>
                <!--details-->
                <div class="details clearfix">
                    <div class="sui-navbar">
                        <div class="navbar-inner filter">
                            <ul class="sui-nav">
                                <li class="active">
                                    <a href="#">综合</a>
                                </li>
                                <li>
                                    <a href="#">销量</a>
                                </li>
                                <li>
                                    <a href="#">新品</a>
                                </li>
                                <li>
                                    <a href="#">评价</a>
                                </li>
                                <li>
                                    <a href="#">价格⬆</a>
                                </li>
                                <li>
                                    <a href="#">价格⬇</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="goods-list">
                        <ul class="yui3-g">
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <a href="item.html"  target="_blank"><img src="./images/search/mobile01.png" /></a>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile02.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile03.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile04.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile05.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile06.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile01.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile02.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile03.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-5">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/mobile04.png" />
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                    </div>
                                    <div class="attr">
                                        <a target="_blank" href="item.html"  title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)Apple苹果iPhone 6s (A1699)</a>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="fr page">
                        <div class="sui-pagination clearfix">
                            <ul>
                                <li class="prev disabled">
                                    <a href="#">«上一页</a>
                                </li>
                                <li class="active">
                                    <a href="#">1</a>
                                </li>
                                <li>
                                    <a href="#">2</a>
                                </li>
                                <li>
                                    <a href="#">3</a>
                                </li>
                                <li>
                                    <a href="#">4</a>
                                </li>
                                <li>
                                    <a href="#">5</a>
                                </li>
                                <li class="dotted"><span>...</span></li>
                                <li class="next">
                                    <a href="#">下一页»</a>
                                </li>
                            </ul>
                            <div><span>共10页&nbsp;</span></div>
                        </div>
                    </div>
                </div>
                <!--hotsale-->
                <div class="clearfix hot-sale">
                    <h4 class="title">热卖商品</h4>
                    <div class="hot-list">
                        <ul class="yui3-g">
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/like_01.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/like_03.png" />
                                    </div>
                                    <div class="attr">
                                        <em>金属A面，360°翻转，APP下单省300！</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/like_04.png" />
                                    </div>
                                    <div class="attr">
                                        <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4068.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有20人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/search/like_02.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部 -->
        <div class="footer">
            <div class="footer-container">
                <div class="footerList">
                    <div class="footerItem">
                        <h4>购物指南</h4>
                        <ul class="footerItemCon">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>购物指南</li>
                        </ul>

                    </div>
                    <div class="footerItem">
                        <h4>配送方式</h4>
                        <ul class="footerItemCon">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </div>
                    <div class="footerItem">
                        <h4>支付方式</h4>
                        <ul class="footerItemCon">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div class="footerItem">
                        <h4>售后服务</h4>
                        <ul class="footerItemCon">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div class="footerItem">
                        <h4>特色服务</h4>
                        <ul class="footerItemCon">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>尚品汇E卡</li>
                            <li>尚品汇通信</li>
                        </ul>
                    </div>
                    <div class="footerItem">
                        <h4>帮助中心</h4>
                        <img src="./images/wx_cz.jpg">
                    </div>
                </div>
                <div class="copyright">
                    <ul class="helpLink">
                        <li>关于我们
                            <span class="space"></span>
                        </li>
                        <li>联系我们
                            <span class="space"></span>
                        </li>
                        <li>关于我们
                            <span class="space"></span>
                        </li>
                        <li>商家入驻
                            <span class="space"></span>
                        </li>
                        <li>营销中心
                            <span class="space"></span>
                        </li>
                        <li>友情链接
                            <span class="space"></span>
                        </li>
                        <li>关于我们
                            <span class="space"></span>
                        </li>
                        <li>营销中心
                            <span class="space"></span>
                        </li>
                        <li>友情链接
                            <span class="space"></span>
                        </li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区宏福科技园综合楼6层</p>
                    <p>京ICP备19006430号</p>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script>
        /*
            1.添加了asideShow()函数
        */
        window.addEventListener("DOMContentLoaded", function () {
            //保存当前缩略图的下标
            let magnifierImgID = 0;
            //当前的商品数量
            let goodsChangeNum = 1;

            //12.侧边栏效果
            asideShow();
            function asideShow() {
                var pull = document.getElementsByClassName('pull');
                var tabtext = document.getElementsByClassName('tab-text');
                var tabico = document.getElementsByClassName('tab-ico');
                for (var i = 0; i < pull.length; i++) {
                    (function (n) {
                        pull[n].onmouseover = function () {
                            tabtext[n].style.left = "-59px";
                            tabico[n].style.backgroundColor = "#c81623";
                            tabtext[n].style.backgroundColor = "#c81623";
                            //				alert(text[n].backgroundColor);
                        }
                        pull[n].onmouseleave = function () {
                            tabtext[n].style.left = "35px";
                            tabico[n].style.backgroundColor = "#7a6e6e";
                            tabtext[n].style.backgroundColor = "#7a6e6e";

                        }
                    })(i);
                }
                /*
                  侧边栏按钮
                */
                var bnt = document.getElementsByClassName('but')[0];
                var toolbar = document.getElementsByClassName('toolbar')[0];
                bnt.onmousedown = function () {
                    if (bnt.className == 'but list') {
                        //		alert("hehehe");
                        toolbar.className = "toolbar toolbar-out";
                        bnt.className = "but pull-wrap";
                    }
                    else {
                        toolbar.className = "toolbar toolbar-wrap";
                        bnt.className = "but list";
                    }
                }
            }

        })

    </script>
</body>

</html>